Tabla de 15 Ejemplos Interactivos de jQuery

Con consola de pruebas

Contenedor de Pruebas (Aquí verás los efectos de la tabla)

Este es el párrafo interactivo principal.

Caja
  1. Ítem original 1
# Categoría Descripción del Ejemplo Código jQuery Usado Acción en Vivo
1 Efectos Ocultar el párrafo de pruebas. $("#parrafo-prueba").hide();
2 Efectos Mostrar el párrafo de pruebas si está oculto. $("#parrafo-prueba").show();
3 Efectos Alternar visibilidad del párrafo (Toggle). $("#parrafo-prueba").toggle(400);
4 Efectos Desvanecer la caja con Fade Out. $("#caja-prueba").fadeOut("slow");
5 Efectos Hacer aparecer la caja con Fade In. $("#caja-prueba").fadeIn("fast");
6 Manipulación DOM Cambiar el texto del párrafo de pruebas. $("#parrafo-prueba").text("¡Texto cambiado!");
7 Manipulación DOM Insertar código HTML dinámico en el párrafo. $("#parrafo-prueba").html("Texto con Negrita");
8 Manipulación DOM Obtener y alertar el valor del Input de pruebas. alert($("#input-prueba").val());
9 Manipulación DOM Añadir un nuevo elemento al final de la lista (Append). $("#lista-prueba").append("
  • Nuevo Ítem
    • ");
    10 Manipulación CSS Añadir una clase CSS ("clase-roja") a la caja. $("#caja-prueba").addClass("clase-roja");
    11 Manipulación CSS Alternar el Modo Oscuro en todo el documento. $("body").toggleClass("dark-mode");
    12 Manipulación CSS Cambiar el color de fondo de la caja directamente. $("#caja-prueba").css("background-color", "purple");
    13 Eventos Efecto Hover (Cambia color al pasar el mouse por la caja). $("#caja-prueba").mouseenter().mouseleave() Pasa el mouse por la caja
    14 Eventos Avisar en consola que el documento HTML está listo. $(document).ready(fn); ✓ Ejecutado automáticamente
    15 AJAX Simular petición AJAX cargando un texto falso de internet. $.get("https://jsonplaceholder...", fn);